<template>
  <div>
    <div class="IntelligenceSwiperContainer">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="swiperItem in intelligenceSwiperList"
          :key="swiperItem.id"
        >
          <img :src="swiperItem.img_url" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <ClassList :classList="intelligenceProductClassList" />
    <div
      class="divider_line"
      style="
        height: 0.05rem;
        border-bottom: 0.04rem solid rgb(245, 245, 245);
        background-color: rgb(245, 245, 245);
      "
    ></div>
    <div class="hotSale">
      <img
        src="https://i8.mifile.cn/v1/a1/72411ddf-3df9-8d3a-7e5d-9429991710dc.webp"
      />
    </div>
    <div
      class="divider_line"
      style="
        height: 0.05rem;
        border-bottom: 0.04rem solid rgb(245, 245, 245);
        background-color: rgb(245, 245, 245);
      "
    ></div>
    <div class="productionContainer">
      <Production
        v-for="(productDetail, index) in productDetailList"
        :key="index"
        :titleId="productDetail.id"
        :productDetail="productDetail"
      />
    </div>
    <div class="bottom">
      <img
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6c71c1c81edf64e2c13c137c2820805.jpg?f=webp"
      />
    </div>
  </div>
</template>

<script>
import {
  reqIntelligenceSwiperList,
  reqIntelligenceProductClassList,
  reqIntelligenceProductDetailList,
} from "@/api";
import ClassList from "../Recommend/ClassList";
import Production from "./Production";
export default {
  name: "Intelligence",
  components: { ClassList, Production },
  data() {
    return {
      intelligenceSwiperList: [],
      intelligenceProductClassList: [],
      productDetailList: [],
    };
  },
  methods: {
    async getIntelligenceSwiperListData() {
      let result = await reqIntelligenceSwiperList();
      this.intelligenceSwiperList = result.intelligenceSwiper.swiperItems;
    },
    async getIntelligenceProductClassListData() {
      let result = await reqIntelligenceProductClassList();
      this.intelligenceProductClassList = result.genceProductClass.items;
    },
    async getProductDetailData() {
      let result = await reqIntelligenceProductDetailList();
      this.productDetailList = result.genceProductDetail;
      console.log(this.productDetailList);

      // this.changeKey(result.genceProductDetail);
    },
    changeKey(obj) {
      // console.log(Object.keys(arr));这个智能获取到改不了,要修改还是得用Object.defineProperty()
      // obj.map((item, index) => {
      //   let prop = this.titleList[index];
      //   Object.defineProperty(obj, prop, {
      //     value: item.value,
      //     writable: true,
      //   });
      // });
      let newArr = [];
      // for (let value of Object.values(obj)) {
      //   let prop = this.titleList[index];
      //   console.log(prop);
      //   Object.defineProperty(obj, prop, {
      //     set: function () {
      //       newArr.push({ prop: value });
      //     },
      //   });
      // }
      Object.values(obj).map((value, index) => {
        let key = this.titleList[index];
        newArr.push({ [key]: value });
      });
      this.productDetailList = newArr;
      // this.titleList.forEach((item) => {
      //   Object.keys(obj);
      //   JSON.parse(JSON.stringify(obj).replace(/props/g, "props"));
      // });
    },
  },
  mounted() {
    this.getIntelligenceSwiperListData();
    this.getIntelligenceProductClassListData();
    this.getProductDetailData();
  },
};
</script>

<style scoped lang="less">
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  width: 3.75rem;
  height: 1.875rem;
  img {
    width: 100%;
    height: 100%;
  }
}
/deep/ .my-swipe .van-swipe__indicators .van-swipe__indicator {
  width: 0.08rem;
  height: 0.08rem;
}
.hotSale {
  img {
    width: 3.75rem;
  }
}
.bottom {
  img {
    width: 3.75rem;
  }
}
</style>